<template>
  <div class="mail_nickname">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">给自己取一个昵称</div>
    </header>
    <main>
      <img src="../images/xfx.png" alt />

      <p>你希望大家怎么称呼你呢？</p>

      <div class="nickname_input">
        <i></i>
        <input ref="nickname_input" type="text" placeholder="请输入昵称" maxlength="30" minlength="4" />
        <p class="prompt">
          <i class="success"></i>
          <span>昵称可用</span>
        </p>
      </div>

      <button class="opc" @click="register()">开启云音乐</button>
    </main>
    <v-alert v-show="alert_flag" :msg="msg"></v-alert>
  </div>
</template>
<script>
import vAlert from "@/components/alert";
import { mapState } from "vuex";
export default {
  components: {
    vAlert
  },
  data() {
    return {
      msg: "",
      alert_flag: false
    };
  },
  computed: {
    ...mapState("user", ["user_data"])
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    register() {
      let nickname = this.$refs.nickname_input.value;
      this.$store
        .dispatch("nickname/getNickNameData", {
          nickname: nickname
        })
        .then(
          data => {
            if (data.code == 200) {
              this.$store
                .dispatch("login_refresh/getLoginRefreshData", {})
                .then(
                  data => {
                    this.$store
                      .dispatch("login_status/getLoginStatusData", {})
                      .then(
                        data => {
                          this.$router.push({ name: "Home" });
                        },
                        data => {
                          this.msg = "注册失败";
                          this.alert_flag = true;
                          setTimeout(() => {
                            this.alert_flag = false;
                          }, 3000);
                        }
                      );
                  },
                  data => {
                    this.msg = "注册失败";
                    this.alert_flag = true;
                    setTimeout(() => {
                      this.alert_flag = false;
                    }, 3000);
                  }
                );
            } else {
              this.msg = "注册失败";
              this.alert_flag = true;
              setTimeout(() => {
                this.alert_flag = false;
              }, 3000);
            }
          },
          data => {
            this.msg = data.message;
            this.alert_flag = true;
            setTimeout(() => {
              this.alert_flag = false;
            }, 3000);
          }
        );
    }
  }
};
</script>

<style lang="scss" scoped>
.mail_nickname {
  height: 100%;
  width: 100%;
  main {
    .opc {
      position: relative;
    }

    .opc:focus {
      outline: none;
    }

    .opc:after {
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      position: absolute;
      top: 0rem;
      left: 0rem;
      pointer-events: none;
      background-color: #666;
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 2rem;
      opacity: 0;
      transition: all 0.5s;
    }

    .opc:active:after {
      opacity: 0.3;
      transition: 0s;
    }
    > img {
      margin: auto;
      margin-top: 1rem;
      width: 5rem;
      opacity: 0.8;
    }
    > p {
      color: rgba(237, 73, 62, 1);
      font-size: 0.32rem;
      text-align: center;
      line-height: 1.2rem;
    }
    > button {
      display: block;
      background-color: rgba(237, 73, 62, 1);
      border: 0;
      width: 90%;
      height: 1rem;
      border-radius: 2rem;
      font-size: 0.4rem;
      color: #fff;
      margin: auto;
      margin-top: 0.5rem;
    }
    .nickname_input {
      margin-top: 0.5rem;
      position: relative;
      .prompt {
        color: rgba(237, 73, 62, 1);
        font-size: 0.26rem;
        text-align: left;
        padding: 0 0.4rem;
        line-height: 0.8rem;
        visibility: hidden;
        span {
          vertical-align: middle;
          display: inline-block;
          margin-left: 0.1rem;
        }
        i {
          width: 0.35rem;
          height: 0.35rem;
          display: inline-block;
          vertical-align: middle;
        }
        i.success {
          background: url(../images/d90.png) no-repeat;
          background-size: 100% 100%;
        }
        i.fail {
          background: url(../images/e00.png) no-repeat;
          background-size: 100% 100%;
        }
      }
      > i {
        position: absolute;
        top: 0.3rem;
        left: 0.4rem;
        background: url(../images/d08.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
      }
      input {
        box-sizing: border-box;
        width: 90%;
        height: 1rem;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 0.01rem solid #ccc;
        padding-left: 2em;
        font-size: 0.4rem;
      }
      input::placeholder {
        font-size: 0.4rem;
      }
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    background-color: rgba(237, 73, 62, 1);
    overflow: hidden;
    position: relative;
    .left {
      position: absolute;
      top: 0.15rem;
      left: 0.2rem;
      i {
        background: url(../images/bck.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
    }
  }
}
</style>